<template>
  <div class="interview-list-container">
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">我的面试</h1>
          <div class="page-subtitle">查看和管理我的面试申请与记录</div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showApplyDialog = true">
            <el-icon><Plus /></el-icon>
            申请面试
          </el-button>
          <el-button @click="refreshData" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
    </div>

    <div class="page-content">
      <!-- 统计卡片 -->
      <div class="statistics-section">
        <el-row :gutter="24">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon pending">
                  <el-icon><Clock /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.pending_applications }}</div>
                  <div class="stat-label">待审核</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon approved">
                  <el-icon><Check /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.approved_applications }}</div>
                  <div class="stat-label">已通过</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon completed">
                  <el-icon><CircleCheck /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.completed_interviews }}</div>
                  <div class="stat-label">已完成</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon score">
                  <el-icon><TrendCharts /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.average_score }}</div>
                  <div class="stat-label">平均分</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 筛选条件 -->
      <div class="filter-section">
        <el-card class="filter-card" shadow="never">
          <el-row :gutter="16" class="filter-row">
            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <el-select
                v-model="filters.status"
                placeholder="申请状态"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部" value="" />
                <el-option label="待审核" value="pending" />
                <el-option label="已通过" value="approved" />
                <el-option label="已拒绝" value="rejected" />
                <el-option label="已安排" value="scheduled" />
                <el-option label="已完成" value="completed" />
                <el-option label="已过期" value="expired" />
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <el-select
                v-model="filters.interview_type"
                placeholder="面试类型"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部" value="" />
                <el-option label="练习面试" value="practice" />
                <el-option label="模拟面试" value="mock" />
                <el-option label="评估面试" value="assessment" />
                <el-option label="职业指导" value="career_guidance" />
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <el-date-picker
                v-model="filters.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="handleFilterChange"
                class="filter-date"
              />
            </el-col>
            <el-col :xl="6" :lg="24" :md="12" :sm="24" :xs="24">
              <div class="filter-actions">
                <el-button type="primary" @click="handleFilterChange">
                  <el-icon><Search /></el-icon>
                  搜索
                </el-button>
                <el-button @click="resetFilters">
                  <el-icon><Refresh /></el-icon>
                  重置
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 面试申请列表 -->
      <div class="table-section">
        <el-card class="table-card" shadow="never">
          <div class="table-container">
            <el-table
              :data="applicationList"
              v-loading="loading"
              stripe
              class="interview-table"
              :height="tableHeight"
              :header-cell-style="{ background: 'var(--el-fill-color-lighter)', color: 'var(--el-text-color-primary)', fontWeight: '600' }"
              empty-text="暂无面试申请记录"
            >
              <el-table-column prop="title" label="面试标题" min-width="200" show-overflow-tooltip />
              
              <el-table-column prop="interview_type" label="面试类型" width="120" align="center">
                <template #default="{ row }">
                  <el-tag :type="getTypeTagType(row.interview_type)" size="small">
                    {{ row.type_display }}
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="teacher_name" label="指导老师" min-width="120" show-overflow-tooltip />

              <el-table-column prop="status" label="申请状态" width="120" align="center">
                <template #default="{ row }">
                  <el-tag :type="getStatusTagType(row.status)" size="small">
                    {{ row.status_display }}
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="preferred_date" label="期望时间" min-width="160" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ formatPreferredTime(row) }}
                </template>
              </el-table-column>

              <el-table-column prop="scheduled_date" label="安排时间" min-width="160" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ formatScheduledTime(row) }}
                </template>
              </el-table-column>

              <el-table-column prop="created_at" label="申请时间" min-width="160" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ formatDateTime(row.created_at) }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="200" fixed="right" align="center">
                <template #default="{ row }">
                  <div class="action-buttons">
                    <el-button
                      type="primary"
                      size="small"
                      link
                      @click="viewDetail(row)"
                      class="action-btn"
                    >
                      <el-icon><View /></el-icon>
                      详情
                    </el-button>
                    <el-button
                      v-if="row.status === 'completed'"
                      type="success"
                      size="small"
                      link
                      @click="viewResult(row)"
                      class="action-btn"
                    >
                      <el-icon><Document /></el-icon>
                      结果
                    </el-button>
                    <el-button
                      v-if="row.status === 'pending'"
                      type="danger"
                      size="small"
                      link
                      @click="cancelApplication(row)"
                      class="action-btn"
                    >
                      <el-icon><Close /></el-icon>
                      取消
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 空状态提示 -->
            <div v-if="!loading && applicationList.length === 0" class="empty-state">
              <el-empty description="还没有面试申请记录">
                <el-button type="primary" @click="showApplyDialog = true">
                  立即申请面试
                </el-button>
              </el-empty>
            </div>
          </div>

          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
            />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 申请面试对话框 -->
    <el-dialog
      v-model="showApplyDialog"
      title="申请面试"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="applyFormRef"
        :model="applyForm"
        :rules="applyRules"
        label-width="100px"
      >
        <el-form-item label="面试类型" prop="interview_type">
          <el-select v-model="applyForm.interview_type" placeholder="请选择面试类型" style="width: 100%">
            <el-option label="练习面试" value="practice" />
            <el-option label="模拟面试" value="mock" />
            <el-option label="评估面试" value="assessment" />
            <el-option label="职业指导" value="career_guidance" />
          </el-select>
        </el-form-item>

        <el-form-item label="指导老师" prop="teacher">
          <el-select v-model="applyForm.teacher" placeholder="请选择指导老师" style="width: 100%">
            <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="面试标题" prop="title">
          <el-input v-model="applyForm.title" placeholder="请输入面试标题" />
        </el-form-item>

        <el-form-item label="申请说明" prop="description">
          <el-input
            v-model="applyForm.description"
            type="textarea"
            :rows="4"
            placeholder="请描述您的面试需求和期望"
          />
        </el-form-item>

        <el-form-item label="期望日期" prop="preferred_date">
          <el-date-picker
            v-model="applyForm.preferred_date"
            type="date"
            placeholder="选择期望面试日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
            :disabled-date="disabledDate"
          />
        </el-form-item>

        <el-form-item label="期望时间" prop="preferred_time_start">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-time-picker
                v-model="applyForm.preferred_time_start"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%"
              />
            </el-col>
            <el-col :span="12">
              <el-time-picker
                v-model="applyForm.preferred_time_end"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showApplyDialog = false">取消</el-button>
          <el-button type="primary" @click="submitApplication" :loading="submitting">
            提交申请
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Refresh, Clock, Check, CircleCheck, TrendCharts,
  Search, View, Document, Close
} from '@element-plus/icons-vue'
import interviewApi from '@/api/interview'
import { formatDateTime } from '@/utils/format'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const showApplyDialog = ref(false)

// 列表数据
const applicationList = ref([])
const teacherList = ref([])

// 统计数据
const statistics = reactive({
  total_applications: 0,
  pending_applications: 0,
  approved_applications: 0,
  completed_interviews: 0,
  average_score: 0
})

// 筛选条件
const filters = reactive({
  status: '',
  interview_type: '',
  dateRange: null
})

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 计算表格高度
const tableHeight = computed(() => {
  return window.innerHeight - 400
})

// 申请表单
const applyForm = reactive({
  interview_type: '',
  teacher: '',
  title: '',
  description: '',
  preferred_date: '',
  preferred_time_start: '',
  preferred_time_end: ''
})

const applyFormRef = ref()

// 表单验证规则
const applyRules = {
  interview_type: [{ required: true, message: '请选择面试类型', trigger: 'change' }],
  teacher: [{ required: true, message: '请选择指导老师', trigger: 'change' }],
  title: [
    { required: true, message: '请输入面试标题', trigger: 'blur' },
    { min: 5, max: 50, message: '标题长度在 5 到 50 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入申请说明', trigger: 'blur' },
    { min: 10, max: 500, message: '说明长度在 10 到 500 个字符', trigger: 'blur' }
  ],
  preferred_date: [{ required: true, message: '请选择期望日期', trigger: 'change' }],
  preferred_time_start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  preferred_time_end: [
    { required: true, message: '请选择结束时间', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (value && applyForm.preferred_time_start && value <= applyForm.preferred_time_start) {
          callback(new Error('结束时间必须晚于开始时间'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    scheduled: 'primary',
    completed: 'success',
    expired: 'info'
  }
  return typeMap[status] || 'info'
}

// 获取类型标签类型
const getTypeTagType = (type) => {
  const typeMap = {
    practice: 'primary',
    mock: 'success',
    assessment: 'warning',
    career_guidance: 'info'
  }
  return typeMap[type] || 'info'
}

// 格式化期望时间
const formatPreferredTime = (row) => {
  if (!row.preferred_date) return '-'
  const timeStr = row.preferred_time_start && row.preferred_time_end 
    ? `${row.preferred_time_start}-${row.preferred_time_end}`
    : ''
  return `${row.preferred_date} ${timeStr}`.trim()
}

// 格式化安排时间
const formatScheduledTime = (row) => {
  if (!row.scheduled_date) return '-'
  const timeStr = row.scheduled_time_start && row.scheduled_time_end 
    ? `${row.scheduled_time_start}-${row.scheduled_time_end}`
    : ''
  return `${row.scheduled_date} ${timeStr}`.trim()
}

// 获取申请列表
const fetchApplicationList = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      ...filters
    }

    // 过滤掉空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key]
      }
    })

    const response = await interviewApi.application.getApplicationList(params)

    if (response && response.data) {
      applicationList.value = response.data.results || []
      pagination.total = response.data.count || 0
    } else {
      applicationList.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('获取申请列表失败:', error)
    ElMessage.error('获取申请列表失败，请检查网络连接')
    applicationList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 获取统计数据
const fetchStatistics = async () => {
  try {
    const response = await interviewApi.other.getStatistics()
    if (response && response.data) {
      Object.assign(statistics, response.data)
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
    // 设置默认值
    Object.assign(statistics, {
      total_applications: 0,
      pending_applications: 0,
      approved_applications: 0,
      completed_interviews: 0,
      average_score: 0
    })
  }
}

// 获取可用老师列表
const fetchTeacherList = async () => {
  try {
    const response = await interviewApi.other.getAvailableTeachers()
    if (response && response.data) {
      teacherList.value = response.data || []
    } else {
      teacherList.value = []
    }
  } catch (error) {
    console.error('获取老师列表失败:', error)
    teacherList.value = []
    ElMessage.warning('获取老师列表失败，请稍后重试')
  }
}

// 刷新数据
const refreshData = () => {
  fetchApplicationList()
  fetchStatistics()
}

// 筛选变化
const handleFilterChange = () => {
  pagination.page = 1
  fetchApplicationList()
}

// 重置筛选
const resetFilters = () => {
  Object.assign(filters, {
    status: '',
    interview_type: '',
    dateRange: null
  })
  handleFilterChange()
}

// 分页变化
const handleSizeChange = () => {
  pagination.page = 1
  fetchApplicationList()
}

const handleCurrentChange = () => {
  fetchApplicationList()
}

// 提交申请
const submitApplication = async () => {
  try {
    await applyFormRef.value.validate()
    submitting.value = true

    // 验证时间逻辑
    if (applyForm.preferred_time_end <= applyForm.preferred_time_start) {
      ElMessage.error('结束时间必须晚于开始时间')
      return
    }

    const response = await interviewApi.application.createApplication(applyForm)

    if (response && response.data) {
      ElMessage.success('面试申请提交成功，请等待老师审核')
      showApplyDialog.value = false
      resetApplyForm()
      refreshData()
    } else {
      ElMessage.error('提交失败，请重试')
    }
  } catch (error) {
    console.error('提交申请失败:', error)
    if (error.response && error.response.data) {
      const errorMsg = error.response.data.message || error.response.data.detail || '提交申请失败'
      ElMessage.error(errorMsg)
    } else {
      ElMessage.error('网络错误，请检查网络连接后重试')
    }
  } finally {
    submitting.value = false
  }
}

// 重置申请表单
const resetApplyForm = () => {
  Object.assign(applyForm, {
    interview_type: '',
    teacher: '',
    title: '',
    description: '',
    preferred_date: '',
    preferred_time_start: '',
    preferred_time_end: ''
  })
  applyFormRef.value?.resetFields()
}

// 查看详情
const viewDetail = (row) => {
  if (row.interview_id) {
    // 如果有关联的面试记录，跳转到面试详情页面
    router.push(`/interviews/detail/${row.interview_id}`)
  } else {
    // 如果没有面试记录，显示申请详情
    showApplicationDetail(row)
  }
}

// 显示申请详情弹窗
const showApplicationDetail = (row) => {
  ElMessageBox.alert(
    `
    <div style="text-align: left;">
      <p><strong>申请标题：</strong>${row.title}</p>
      <p><strong>面试类型：</strong>${row.type_display}</p>
      <p><strong>申请状态：</strong>${row.status_display}</p>
      <p><strong>指导老师：</strong>${row.teacher_name}</p>
      <p><strong>期望日期：</strong>${row.preferred_date}</p>
      <p><strong>期望时间：</strong>${row.preferred_time_start} - ${row.preferred_time_end}</p>
      ${row.scheduled_date ? `<p><strong>安排日期：</strong>${row.scheduled_date}</p>` : ''}
      ${row.scheduled_time_start ? `<p><strong>安排时间：</strong>${row.scheduled_time_start} - ${row.scheduled_time_end}</p>` : ''}
      ${row.location ? `<p><strong>面试地点：</strong>${row.location}</p>` : ''}
      ${row.review_comments ? `<p><strong>审核意见：</strong>${row.review_comments}</p>` : ''}
      <p><strong>申请说明：</strong></p>
      <div style="background: var(--el-fill-color-light); padding: 10px; border-radius: 4px; margin-top: 8px;">
        ${row.description}
      </div>
    </div>
    `,
    '申请详情',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭'
    }
  )
}

// 查看结果
const viewResult = (row) => {
  // 需要先获取面试记录ID，这里暂时使用申请ID
  // TODO: 从申请记录获取对应的面试记录ID
  router.push(`/interviews/result/${row.id}`)
}

// 取消申请
const cancelApplication = async (row) => {
  try {
    await ElMessageBox.confirm('确定要取消这个面试申请吗？', '确认取消', {
      type: 'warning'
    })
    
    await interviewApi.application.deleteApplication(row.id)
    ElMessage.success('申请已取消')
    refreshData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消申请失败:', error)
      ElMessage.error('取消申请失败')
    }
  }
}

// 初始化
onMounted(() => {
  fetchApplicationList()
  fetchStatistics()
  fetchTeacherList()
})
</script>

<style scoped>
.interview-list-container {
  min-height: 100vh;
  background: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

.page-header {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  padding: 24px 32px;
  transition: all 0.3s ease;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.page-content {
  flex: 1;
  padding: 24px 32px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.statistics-section {
  margin-bottom: 24px;
}

.stat-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.stat-icon.pending {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon.approved {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon.completed {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.stat-icon.score {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.filter-row {
  padding: 20px;
}

.filter-select,
.filter-date {
  width: 100%;
}

.filter-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.interview-table {
  width: 100%;
  font-size: 14px;
}

:deep(.el-table) {
  border-radius: 0;
  border: none;
}

:deep(.el-table__header-wrapper) {
  border-radius: 0;
}

:deep(.el-table th) {
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f3f4f6;
  padding: 16px 12px;
}

:deep(.el-table__row:hover) {
  background-color: var(--el-fill-color-lighter);
}

:deep(.el-table__row--striped) {
  background-color: var(--el-fill-color-light);
}

:deep(.el-table__row--striped:hover) {
  background-color: var(--el-fill-color);
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.action-btn {
  padding: 4px 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-wrapper {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
}

:deep(.el-pagination) {
  font-weight: 500;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border-radius: 6px;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 6px;
  margin: 0 2px;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-content {
    padding: 20px 24px;
  }

  .header-content {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px 20px;
  }

  .header-content {
    padding: 0 20px;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .filter-row {
    padding: 16px;
  }

  .filter-actions {
    justify-content: stretch;
  }

  .filter-actions .el-button {
    flex: 1;
  }

  .stat-content {
    padding: 16px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    margin-right: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  :deep(.el-table) {
    font-size: 13px;
  }

  :deep(.el-table td) {
    padding: 12px 8px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px 16px;
  }

  .page-content {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }

  .header-actions .el-button {
    width: 100%;
  }

  .filter-row {
    padding: 12px;
  }

  .stat-content {
    padding: 12px;
  }
}
</style>
